<template>
    <div class="buy-detail">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="modelBrand"
                     style="color:#fff;">
        </van-nav-bar>
        <div style="marginTop:46px;">
            <van-loading type="spinner" class="loading" v-if="showDetail"/>
            <van-swipe v-if="allPhotoData.length &gt; 0" :loop="false">
                <van-swipe-item v-for="(image, index) in allPhotoData" :key="index">
                    <div class="banner-box">
                        <img v-lazy="image.url" :key="image.id" class="swiper-banner shopgogo" alt=""/>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <!--buy old(1) or buy new(0)-->
            <!--两个都有-->
            <div class="buy-area" v-if="buttonStatus==3">
                <van-button size="normal" @click="goToList(0)">{{$t('m.BuyNew')}}</van-button>
                <span style="width:20px;"></span>
                <van-button size="normal" @click="goToList(1)">{{$t('m.BuyUsed')}}</van-button>
            </div>
            <!--只有旧的-->
            <div class="buy-area" v-else-if="buttonStatus==2">
                <van-button size="normal" @click="goToList(1)">{{$t('m.BuyUsed')}}</van-button>
            </div>
            <!--只有新的-->
            <div class="buy-area" v-else-if="buttonStatus==1">
                <van-button size="normal" @click="goToList(0)">{{$t('m.BuyNew')}}</van-button>
            </div>
            <!--network 拿数据的方法和dom与下面的不同，所以单独拿出来写，默认network一定存在,如果拿不到数据就隐藏-->
            <div class="detail-out-wraper" v-if="technologyData.length>0">
                <div class="detail-content">
                    <div class="content-title">NETWORK</div>
                    <van-collapse v-model="activeNameThree" accordion class="edit">
                        <van-collapse-item title="Techonolgy" name="1" :value="technologyContent">
                            <div v-for="item in technologyData" class="line-item">
                                <span class="title">{{item.title}} </span>
                                <span class="content">{{item.content}}</span>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
            <!--统一模版-->
            <div class="detail-out-wraper" v-for="(item,index) in descData" :key="index" v-if="getTitle(item)">
                <div class="detail-content">
                    <!--item 是一个对象-->
                    <div class="content-title">{{getTitle(item)}}</div>
                    <div class="content-subtitle" v-for="itm in getMainData(item)">
                        <span class="sub-title">{{itm.title}}</span>
                        <span class="sub-content">{{itm.content}}</span>
                    </div>
                    <div class="content-subtitle">
                        <span class="sub-title" style="margin:0"></span>
                        <span class="sub-content" style="margin:0">
                            <span v-for="im in getOtherData(item)" style="display:block;margin:10px 0">- {{im}}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getPhoneDetail} from "../../static/api/guc_api";

    export default {
        name: 'comparePhonePhoneDetail',
        data() {
            return {
                mainPhotoUrl: '',
                activeNameThree: '3',
                propertyValueId: '',
                modelBrand: 'Brand model',
                descData: [],
                technology: '',
                technologyContent: '',
                technologyData: [],
                showDetail: true,
                allPhotoData: [],
                buttonStatus: ''
            }
        },
        methods: {
            getModelData() {
                getPhoneDetail({propertyValueId: this.propertyValueId})
                    .then(res => {
                        this.showDetail = false
                        if (res.data.errorID == 0) {
                            this.modelBrand = res.data.object.model
                            let data = JSON.parse(res.data.object.description || "[]")
                            //去掉data中的network和test 并对数据进行排序  从上到下依次是 launch(0) platform(1)  maincamera(2) selfiecamera(3)
                            // memory(4)  battery(5) dispakly(6) body(7) sound(8) comms(9) features(10) misc(11)
                            let arr = []
                            let networkData = {}
                            data.forEach(item => {
                                for (let key in item) {
                                    if (key == 'Network') {
                                        networkData = item
                                    }
                                    else if (key == 'Launch') {
                                        arr[0] = item
                                    }
                                    else if (key == 'Platform') {
                                        arr[1] = item
                                    }
                                    else if (key == 'Main Camera') {
                                        arr[2] = item
                                    }
                                    else if (key == 'Selfie camera') {
                                        arr[3] = item
                                    }
                                    else if (key == 'Memory') {
                                        arr[4] = item
                                    }
                                    else if (key == 'Battery') {
                                        arr[5] = item
                                    }
                                    else if (key == 'Display') {
                                        arr[6] = item
                                    }
                                    else if (key == 'Body') {
                                        arr[7] = item
                                    }
                                    else if (key == 'Sound') {
                                        arr[8] = item
                                    }
                                    else if (key == 'Comms') {
                                        arr[9] = item
                                    }
                                    else if (key == 'Features') {
                                        arr[10] = item
                                    }
                                    else if (key == 'Misc') {
                                        arr[11] = item
                                    }
                                }
                            })
                            this.descData = arr
                            //把首图添加到详情图数据里面
                            let mainPhotoUrl = res.data.object.photo || ''
                            let detailPhoto = res.data.object.phoneModelImageList || []
                            if (detailPhoto.length > 0) {
                                let tempData = {}
                                tempData.id = detailPhoto[0]['id'] - 1
                                tempData.phoneModelId = detailPhoto[0]['phoneModelId']
                                tempData.url = mainPhotoUrl
                                tempData.sequence = detailPhoto[0]['sequence'] - 1
                                detailPhoto.unshift(tempData)
                            }
                            this.allPhotoData = detailPhoto
                            //初始化图片数据之后再处理button显示的问题 要不然button回直接出现在顶部
                            if (this.$route.query.buttonStatus) {
                                this.buttonStatus = this.$route.query.buttonStatus
                            }
                            //初始化network数据
                            let tempArr = []
                            if (networkData['Network']) {
                                networkData['Network'].forEach(item => {
                                    let tempObj = {}
                                    for (let key in item) {
                                        if (key != 'Technology') {
                                            tempObj.title = key
                                            tempObj.content = item[key]
                                            tempArr.push(tempObj)
                                        }
                                        else {
                                            this.technologyContent = item['Technology']
                                        }
                                    }
                                })
                                this.technologyData = tempArr
                            }
                        }
                        else {
                            this.$toast(res.data.message)
                        }
                    })
                    .catch(err => {
                        this.showDetail = false
                        console.log(err)
                    })
            },
            getTitle(obj) {
                let tempArr = []
                for (let key in obj) {
                    if (key) {
                        tempArr.push(key)
                    }
                }
                if (tempArr.length > 0) {
                    return tempArr[0]
                }
                else {
                    return false
                }
            },
            getMainData(obj) {
                let tempArr = []
                for (let key in obj) {
                    if (key) {
                        tempArr.push(key)
                    }
                }
                if (tempArr.length > 0) {
                    let data = obj[tempArr[0]]
                    let finalArr = []
                    data.forEach(item => {
                        let tempObj = {}
                        for (let key in item) {
                            if (key) {
                                tempObj.title = key
                                tempObj.content = item[key]
                                finalArr.push(tempObj)
                            }
                        }
                    })
                    return finalArr
                }
            },
            getOtherData(obj) {
                let tempArr = []
                for (let key in obj) {
                    if (key) {
                        tempArr.push(key)
                    }
                }
                if (tempArr.length > 0) {
                    // battery的数据额外处理
                    if (tempArr[0] == 'Battery') {
                        let batteryData = obj['Battery']
                        let tempStr = batteryData[0][""]
                        let tempArr = []
                        tempArr.push(tempStr)
                        return tempArr
                    }
                    else {
                        let data = obj[tempArr[0]]
                        let finalArr = []
                        data.forEach(item => {
                            for (let key in item) {
                                if (key == "") {
                                    let tempStr = item[""]
                                    let tempArr = tempStr.split('- ')
                                    tempArr.shift()
                                    finalArr = tempArr
                                }
                            }
                        })
                        return finalArr
                    }
                }
            },
            goToList(status) {
                //要跟在buylist页面往路由中添加filter参数的方法一样
                //跳到新的phone 列表页了 所以之前的方法也暂时注释掉
                // let tempArr1 = []
                // tempArr1.push(this.propertyValueId)
                // let tempArr2 = []
                // tempArr2.push(tempArr1)
                // let tempObj = {
                //     condition: status,
                //     sort: 'sortPrice asc',
                //     properties: tempArr2
                // }
                // this.$router.push({
                //     path: '/buy-list',
                //     query: {
                //         filter: JSON.stringify(tempObj),
                //         categoryId: 142
                //     }
                // })
                this.$router.push({
                    path: 'phone-list',
                    query: {
                        // categoryId: 142,
                        condition: status,
                        propertyValueId: this.propertyValueId,
                        //直接把title传过去，要不然到新页面再发送请求获取title太慢
                        modelBrand: this.modelBrand
                    }
                })

            },
        },
        mounted() {
            if (this.$route.query.propertyValueId) {
                this.propertyValueId = this.$route.query.propertyValueId || ''
            }
            if (this.$route.query.modelBrand) {
                this.modelBrand = this.$route.query.modelBrand || ''
            }
            this.getModelData()
        },
        //如果是到phone列表页，就缓存 注意！！！ 做缓存时组件的name必须与.lavas下router.js中对应的组件名高度一致 要不然没效果
        beforeRouteLeave(to, from, next) {
            if (to.path == '/compare-phone/phone-list') {
                from.meta['needFresh'] = false;
            }
            else {
                from.meta['needFresh'] = true;
            }
            next()
        },
        activated() {  //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
            if (this.$route.meta['needFresh']) {// 当前是否需要刷新
                Object.assign(this.$data, this.$options.data())  // 整个页面数据重置
                //重新走一遍mounted
                if (this.$route.query.propertyValueId) {
                    this.propertyValueId = this.$route.query.propertyValueId || ''
                }
                if (this.$route.query.modelBrand) {
                    this.modelBrand = this.$route.query.modelBrand || ''
                }
                this.getModelData()
            }
        }
    }
</script>
<style>
    .edit .van-collapse-item__content {
        padding: 0;
        background: #f6f6f6;
    }

    .edit .van-collapse-item .van-cell {
        margin: 0;
        padding: 0;
        background: #f6f6f6 !important;
    }

    .edit .van-collapse-item .van-cell .van-cell__title {
        min-width: 100px;
        margin: 10px 0 10px 10px;
        font-size: 16px !important;
        font-weight: 700;
        color: #555;
        flex: 0;
    }

    .edit .van-collapse-item .van-cell .van-cell__value {
        margin: 10px 0;
        font-size: 15px;
        text-align: left;
    }

    .edit .van-collapse-item .van-cell .van-cell__right-icon {
        margin: 10px;
    }

    .buy-detail .van-nav-bar {
        background-color: #f90;
    }

    .buy-detail .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }

    .buy-detail .van-swipe {
        background: #f0f0f0;
        height: 320px;
    }

    .buy-detail .van-swipe .van-swipe-item::before {
        content: 'Tolymoly';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 2.5rem;
        font-weight: bold;
        color: #C0BFBF;
        line-height: 320px;
    }

    @media (max-width: 375px) and (min-width: 321px) {
        .buy-detail .van-swipe {
            height: 368px;
            line-height: 368px;
        }

        .buy-detail .van-swipe .van-swipe-item::before {
            line-height: 368px;
        }
    }

    @media (max-width: 1080px) and (min-width: 376px) {
        .buy-detail .van-swipe {
            height: 414px;
            line-height: 414px;
        }

        .buy-detail .van-swipe .van-swipe-item::before {
            line-height: 414px;
        }
    }

</style>
<style scoped>
    .orange {
        color: #f90 !important;
    }

    .detail-out-wraper {
        width: 100%;
        margin: 5px;

    }

    .detail-out-wraper .detail-content {
        background: #F6F6F6;
    }

    .detail-out-wraper .detail-content .content-title {
        color: #c73022;
        font-weight: 600;
        padding: 5px 8px;
    }

    .detail-out-wraper .detail-content .content-subtitle {
        display: flex;
        align-items: flex-start;
        border-top: 1px solid #e3e3e3;
    }

    .detail-out-wraper .detail-content .content-subtitle .sub-title {
        min-width: 100px;
        margin: 10px 0 10px 10px;
        font-size: 16px;
        font-weight: 700;
        color: #555;
    }

    .detail-out-wraper .detail-content .content-subtitle .sub-content {
        flex: 1;
        margin: 10px 0;
        font-size: 15px;
    }

    .detail-out-wraper .detail-content .line-item {
        display: flex;
        margin: 5px;
    }

    .detail-out-wraper .detail-content .line-item .title {
        min-width: 100px;
        margin: 10px 0 10px 5px;
        font-size: 16px;
        font-weight: 700;
        color: #555;
    }

    .detail-out-wraper .detail-content .line-item .content {
        flex: 1;
        margin: 10px 0;
        font-size: 15px;
    }

    .loading {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%);
        z-index: 10002;
    }

    .banner-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 100%;
        margin: auto;
    }

    .swiper-banner {
        max-width: 100%;
        max-height: 320px;
        display: block;

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .swiper-banner.no-image {
        background: #f0f0f0;
        font-size: 2.5rem;
        font-weight: bold;
        color: #C0BFBF;
        text-align: center;
    }

    .buy-area {
        display: flex;
        margin: 5px;
        justify-content: center;
    }

    @media (max-width: 375px) and (min-width: 321px) {
        .swiper-banner {
            max-height: 368px;
            line-height: 368px;
        }

        .main-explore .explore-item .explore-item-icon {
            /*height: 155px;*/
        }

        .main-explore .explore-item .explore-item-icon::before {
            /*line-height: 155px;*/
        }

        .face-icon {
            margin-right: 15px;
        }

        .shopgogo::before {
            line-height: 368px;
        }
    }

    @media (max-width: 1080px) and (min-width: 376px) {
        .swiper-banner {
            max-height: 414px;
            line-height: 414px;
        }

        .main-explore .explore-item .explore-item-icon {
            /*height: 173px;*/
        }

        .main-explore .explore-item .explore-item-icon::before {
            /*line-height: 173px;*/
        }

        .face-icon {
            margin-right: 15px;
        }

        .shopgogo::before {
            line-height: 414px;
        }
    }


</style>


